<template>
  <div class="interaction-scoring">
    <crumb />
    <div class="container">
      <div class="box-left">
        <div class="section">
          <template v-for="(item, index) in scoringData.resourceCaseBgList">
            <div class="content" :key="index">
              <!-- 文本 -->
              <div class="media-box" v-if="item.displayType === '1'">
                {{item.resourceCaseContentEn}}
              </div>
              <!-- 图片 -->
              <div class="media-box" v-if="item.displayType === '2'">
                <img :src="item.fileUrl" style="width:100%">
              </div>
              <!-- 音频 -->
              <div class="media-box" v-if="item.displayType === '3'">
                <audio class="audio" controls :src="item.fileUrl" controlsList="nodownload"></audio>
              </div>
              <!-- 视频 -->
              <div class="media-box" v-if="item.displayType === '4'">
                <video class="video" controls :src="item.fileUrl">
                </video>
              </div>
            </div>
          </template>
          <div class="file-box">
            报告文件<a>查看</a>
          </div>
          <div class="fill-box">
            <div class="title">答题内容</div>
            <textarea v-model="answerContent" disabled name="fil" cols="30" rows="10">
            </textarea>
          </div>
        </div>
      </div>
      <div class="box-right">
        <div class="section">
          <div class="title">实训评分</div>
          <div class="form">
            <div class="group" v-for="(item, index) in caseEvaluateTemp" :key="index">
              <div class="label">{{item.evaluateItem}}</div>
              <input type="text" :disabled="{'disabled': scoringData.isHeadman==='0'}" v-model="item.evaluateItemScore" placeholder="请输入你的评分" />
              <i class="el-icon-info" @click="openTips(item)"></i>
            </div>
          </div>
          <div class="submit-btn active" v-if="scoringData.isHeadman==='1'" @click="commitScore">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { groupMark, commitScore } from '@/api/student/training/interaction'
export default {
  name: 'interaction-scoring',
  data () {
    return {
      scoringData: '', // 侧边数据
      answerContent: '', // 答题内容
      caseEvaluateTemp: [] // 评分模板json
    }
  },
  components: {
  },
  mounted () {
    this.groupMark()
  },
  methods: {
    openTips (message) {
      this.$alert(`<strong>满分值：${message.evaluateItemScore}分</strong><br/>${message.evaluateItemRemark}`, `${message.evaluateItem}评分说明`, {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '好的'
      })
    },
    // 小组评分
    async groupMark () {
      const res = await groupMark(
        {
          groupId: this.$route.query.groupId, // 评分小组id
          resourceNodeId: this.$route.query.resourceNodeId // 环节id
        }
      )
      console.log(res)
      if (res.code === '200') {
        this.scoringData = res.data
        this.caseEvaluateTemp = JSON.parse(res.data.caseEvaluateTemp)
        if (this.trainingInteractionAnswerVo.answerFlag === '1') { // 已作答
          this.answerContent = JSON.parse(this.trainingInteractionAnswerVo.result).answer
        }
      } else {
        this.$message.error(res.message)
      }
    },
    // 小组评分提交
    async commitScore () {
      // 计算总分
      let totalScore = 0
      this.caseEvaluateTemp.forEach((item) => {
        totalScore += Number(item.evaluateItemScore)
      })
      const res = await commitScore(
        {
          caseEvaluateTemp: JSON.stringify(this.caseEvaluateTemp), // 评分详情json
          stuGroupScoreId: this.scoringData.stuGroupScoreId, // 学生小组评分表id:
          totalScore: totalScore // 总分
        }
      )
      if (res.code === '200') {
        this.$router.go(-1)
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.interaction-scoring {
  .container {
    display: flex;
    justify-content: space-between;
    .box-left {
      width: 630px;
      background: #fff;
      padding: 15px;
      .media-box {
        padding: 15px 0;
        .video {
          width: 100%;
        }
      }
      .file-box {
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;
        font-size: 14px;
        font-weight: bold;
        a {
          color: #009cf6;
          font-weight: normal;
        }
      }
      .fill-box {
        margin-top: 30px;
        .fill-title {
          font-size: 14px;
        }
        textarea {
          width: 100%;
          margin-top: 20px;
        }
      }
    }
    .box-right {
      width: 550px;
      min-height: 100%;
      background: #fff;
      padding: 15px;
      box-sizing: border-box;
      .title {
        font-size: 14px;
        font-weight: bold;
      }
      .form {
        .group {
          display: flex;
          align-items: center;
          margin: 40px 0;
          .label {
            font-size: 14px;
            margin-right: 15px;
            width: 100px;
          }
          input {
            width: 90%;
            height: 30px;
          }
          i {
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
      .submit-btn {
        width: 100%;
        line-height: 40px;
        border-radius: 10px;
        background: #BBBBBB;
        color: #fff;
        text-align: center;
        margin-top: 30px;
        cursor: pointer;
        &.active {
           background: #009cf6;
        }
      }
    }
  }
}

</style>
